<template>
  <div class="result-item" @click="Toitemdetail(reList.product_id)">
    <img :src="reList?.image" alt="">
    <div class="result-item-con">
        <div class="result-item-name">{{ reList?.name }}</div>
        <div class="result-item-desc">
            <div v-html="reList?.desc"></div>
        </div>
        <div class="result-item-desc2">
            <div class="result-item-desc2-list" v-for="(item, index) in reList.class_parameters?.list" :key="index">
                <div class="result-item-top-title">{{ item.top_title }}</div>
                <div>{{ item.bottom_title }}</div>
            </div>
        </div>
        <div class="result-item-price">
            ￥{{ reList?.price }} 
            <span v-if="reList?.market_price"> ￥ {{ reList?.market_price }}</span>
            <img v-for="(s, i) in reList.sale_label?.activity_label" :key="i" :src="s.img_url" alt="">
        </div>
        <div class="result-item-review">{{ reList.comments_total }}条评价 {{ reList.satisfy_per }}满意</div>
    </div>
  </div>
</template>

<script>
export default {
    props: ['reList'],
    methods:{
        Toitemdetail(a){
            this.$router.push({
                path:`/productdetails/${a}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.result-item{
    padding: 4vw 0;
    display: flex;
    border-bottom: #f1f1f1 1px solid;

    img{
        width: 40vw;
    }

    .result-item-con{
        width: 58vw;
        margin-left: 1vw;

        .result-item-desc{
            width: 55vw;
            max-height: 9vw;
            line-height: 4.5vw;
            margin: 1vw 0;
            color: #888888;
            font-size: 12px;
            div{
                width: 55vw;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }

        .result-item-desc2{
            height: 10vw;
            line-height: 5vw;
            display: flex;
            overflow: hidden;
            
            .result-item-desc2-list{
                color: #888888;
                font-size: 12px;
                width: 20vw;
                text-align: center;
                margin: 1vw 0;
                border-right: #f2f2f2 1px solid;

                .result-item-top-title{
                    color: #444;
                }
            }
        }

        .result-item-price{
            color: #ff6700;
            font-size: 18px;
            display: flex;
            align-items: baseline;
            margin: 1.5vw 0;

            span{
                color: #888888;
                font-size: 12px;
                text-decoration: line-through;
            }
            img{
                margin-left: 1vw;
                vertical-align: center;
                width: auto;
                height: 3.6vw;
            }
        }

        .result-item-review{
            font-size: 12px;
            color: #888888;
        }
    }
}
</style>